<template>
  <div class="mod-role">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="车辆名称" prop="usedCarName">
        <el-input
          v-model="ruleForm.usedCarName"
          placeholder="请输入车辆名称"
          clearable>
        </el-input>
      </el-form-item>
      <span class="span1">*</span>
      <el-form-item label="上牌时间">
        <el-col :span="11">
          <el-form-item prop="usedCarRegistrationTime">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.usedCarRegistrationTime"
                            style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="出厂日期" prop="usedCarProductionTime">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.usedCarProductionTime"
                            style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="表显里程" prop="usedCarMileage">
        <el-col :span="10">
          <el-input
            type="Double"
            v-model="ruleForm.usedCarMileage"
            placeholder="请输入车辆表显里程"
            clearable
            @input="changeCarMileageInput">
          </el-input>
        </el-col>
        单位：万公里
      </el-form-item>
      <el-form-item label="车辆排量" prop="usedCarDisplacement">
        <el-col :span="10">
          <el-input
            type="Double"
            v-model="ruleForm.usedCarDisplacement"
            placeholder="请输入车辆的排量"
            clearable
            @input="changeDisplacementInput">
          </el-input>
        </el-col>
        单位：T
      </el-form-item>
      <span class="span2">*</span>
      <el-form-item label="车辆变速箱">
        <el-col :span="6">
          <el-form-item prop="usedCarGearbox">
            <el-select v-model="ruleForm.usedCarGearbox" placeholder="请选车辆变速箱" filterable clearable>
              <el-option label="手动" value="1"></el-option>
              <el-option label="自动" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="能源形式" prop="usedCarEnergyPlanning">
            <el-select v-model="ruleForm.usedCarEnergyPlanning" placeholder="请选车辆能源形式" filterable clearable>
              <el-option label="汽油" value="1"></el-option>
              <el-option label="柴油" value="2"></el-option>
              <el-option label="电动" value="3"></el-option>
              <el-option label="混动" value="4"></el-option>
              <el-option label="其他" value="5"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车型" prop="usedCarTypeId">
            <el-select v-model="ruleForm.usedCarTypeId" placeholder="请选车辆的车型" filterable clearable>
              <el-option
                v-for="item in typeList"
                :key="item.typeId"
                :label="item.typeName"
                :value="item.typeId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form-item>
      <span class="span3">*</span>
      <el-form-item label="车辆到手价">
        <el-col :span="6">
          <el-form-item prop="usedCarHandSale">
            <el-input
              type="Double"
              v-model="ruleForm.usedCarHandSale"
              placeholder="请输入车辆的到手价"
              clearable
              @input="changeHandSaleInput">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆首付" prop="usedCarDownPayment">
            <el-input
              type="Double"
              v-model="ruleForm.usedCarDownPayment"
              placeholder="请输入车辆的首付"
              clearable
              @input="changeDownPaymentInput">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="新车含税价" prop="usedCarTaxPrice">
            <el-input
              type="Double"
              v-model="ruleForm.usedCarTaxPrice"
              placeholder="请输入车辆的新车含税价"
              clearable
              @input="changeTaxPriceInput">
            </el-input>
          </el-form-item>
        </el-col>
        单位：万元
      </el-form-item>
      <span class="span4">*</span>
      <el-form-item label="车辆品牌">
        <el-col :span="6">
          <el-form-item prop="brandId">
            <el-select
              v-model="ruleForm.brandId"
              placeholder="请选车辆品牌"
              filterable
              clearable
              @change="changeSeries($event)"
            >
              <el-option
                v-for="item in brandList"
                :key="item.brandId"
                :label="item.brandName"
                :value="item.brandId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆车系" prop="usedCarSeriesId">
            <el-select
              v-model="ruleForm.usedCarSeriesId"
              placeholder="请选车辆车系"
              filterable
              clearable
              @change="changeBrand($event)">
              <el-option
                v-for="item in seriesList"
                :key="item.seriesId"
                :label="item.seriesName"
                :value="item.seriesId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生产国家" prop="usedCarProductionMode">
            <el-select v-model="ruleForm.usedCarProductionMode" placeholder="请选车辆的生产国家" filterable clearable>
              <el-option label="中国" value="中国"></el-option>
              <el-option label="美国" value="美国"></el-option>
              <el-option label="日本" value="日本"></el-option>
              <el-option label="印度" value="印度"></el-option>
              <el-option label="韩国" value="韩国"></el-option>
              <el-option label="德国" value="德国"></el-option>
              <el-option label="墨西哥" value="墨西哥"></el-option>
              <el-option label="巴西" value="巴西"></el-option>
              <el-option label="西班牙" value="西班牙"></el-option>
              <el-option label="泰国" value="泰国"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form-item>
      <span class="span5">*</span>
      <el-form-item label="车辆座位数">
        <el-col :span="6">
          <el-form-item prop="usedCarSeat">
            <el-input
              type="number"
              v-model="ruleForm.usedCarSeat"
              placeholder="请输入车辆的座位数"
              clearable
              @input="changeCarSeatInput">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆过户数" prop="usedCarTranShip">
            <el-input
              type="number"
              v-model="ruleForm.usedCarTranShip"
              placeholder="请输入车辆的过户数"
              clearable
              @input="changeTranShipInput">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆钥匙数" prop="usedCarKeyCount">
            <el-input
              type="number"
              v-model="ruleForm.usedCarKeyCount"
              placeholder="请输入车辆的钥匙数"
              clearable
              @input="changeKeyCountInput">
            </el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <span class="span6">*</span>
      <el-form-item label="车辆颜色">
        <el-col :span="8">
          <el-form-item prop="usedCarColor">
            <el-input
              v-model="ruleForm.usedCarColor"
              placeholder="请输入车辆的颜色"
              clearable>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="车辆归属地" prop="userCarLicensePlate">
            <el-input
              v-model="ruleForm.userCarLicensePlate"
              placeholder="请输入车辆的归属地"
              clearable>
            </el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="是否新上架" prop="newStatus">
        <el-radio-group v-model="ruleForm.newStatus">
          <el-radio border label="1" value="1">是</el-radio>
          <el-radio border label="2" value="2">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--<el-form-item label="车辆图片上传" prop="logo">-->
      <!--<single-upload v-model="ruleForm.logo">-->
      <!--</single-upload>-->
      <!--</el-form-item>-->
      <el-form-item label="车辆图片上传" prop="fileList">
        <multi-upload
          ref="uploadRef"
          v-model="ruleForm.fileList"
          @input="inputFileList">
        </multi-upload>
      </el-form-item>
      <el-form-item label="基本情况描述" prop="usedCarDescribe">
        <el-input type="textarea" v-model="ruleForm.usedCarDescribe"
                  placeholder="请输入车辆的基本情况描述"
        ></el-input>
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import SingleUpload from '../../../components/upload/singleUpload'
  import MultiUpload from '../../../components/upload/multiUpload'

  export default {
    data() {
      return {
        brandList: [],
        seriesList: [],
        typeList: [],
        ruleForm: {
          fileList: [],
          usedCarName: '',
          usedCarRegistrationTime: '',
          usedCarProductionTime: '',
          usedCarMileage: '',
          usedCarDisplacement: '',
          usedCarGearbox: '',
          usedCarEnergyPlanning: '',
          brandId: '',
          usedCarTypeId: '',
          usedCarSeriesId: '',
          usedCarProductionMode: '',
          usedCarHandSale: '',
          usedCarDownPayment: '',
          usedCarTaxPrice: '',
          usedCarSeat: '',
          usedCarTranShip: '',
          usedCarKeyCount: '',
          usedCarColor: '',
          userCarLicensePlate: '',
          newStatus: '',
          usedCarDescribe: '',
        },
        rules: {
          usedCarName: [
            {required: true, message: '请输入车辆名称', trigger: 'blur'},
            {min: 3, max: 50, message: '长度在 3 到 50 个字', trigger: 'blur'}
          ],
          usedCarRegistrationTime: [
            {type: 'date', required: true, message: '请选择上牌日期', trigger: 'change'}
          ],
          usedCarProductionTime: [
            {type: 'date', required: true, message: '请选择出厂日期', trigger: 'change'}
          ],
          usedCarMileage: [
            {required: true, message: '请输入表显里程', trigger: 'blur'},
          ],
          usedCarDisplacement: [
            {required: true, message: '请输入车辆排量', trigger: 'blur'}
          ],
          usedCarGearbox: [
            {required: true, message: '请至少选择一个变速箱', trigger: 'change'}
          ],
          usedCarEnergyPlanning: [
            {required: true, message: '请至少选择一个能源形式', trigger: 'change'}
          ],
          usedCarTypeId: [
            {required: true, message: '请至少选择一个车型', trigger: 'change'}
          ],
          usedCarHandSale: [
            {required: true, message: '请输入车辆到手价', trigger: 'blur'}
          ],
          usedCarDownPayment: [
            {required: true, message: '请输入车辆首付', trigger: 'blur'}
          ],
          usedCarTaxPrice: [
            {required: true, message: '请输入车辆的新车含税价', trigger: 'blur'}
          ],
          brandId: [
            {required: true, message: '请至少选择一个车辆品牌', trigger: 'change'}
          ],
          usedCarSeriesId: [
            {required: true, message: '请至少选择一个车系', trigger: 'change'}
          ],
          usedCarProductionMode: [
            {required: true, message: '请至少选择一个生产商', trigger: 'change'}
          ],
          usedCarSeat: [
            {required: true, message: '请输入车辆座位数', trigger: 'blur'}
          ],
          usedCarTranShip: [
            {required: true, message: '请输入车辆过户数', trigger: 'blur'}
          ],
          usedCarKeyCount: [
            {required: true, message: '请输入车辆钥匙数', trigger: 'blur'}
          ],
          usedCarColor: [
            {required: true, message: '请输入车辆颜色', trigger: 'blur'}
          ],
          userCarLicensePlate: [
            {required: true, message: '请输入车辆归属地', trigger: 'blur'}
          ],
          newStatus: [
            {required: true, message: '请选择车辆是否新上架', trigger: 'change'}
          ],
          usedCarDescribe: [
            {required: true, message: '请填写车辆的基本描述', trigger: 'blur'},
            {min: 3, max: 50, message: '长度在 5 到 100 个字', trigger: 'blur'}
          ]
        }
      };
    },
    components: {
      SingleUpload, MultiUpload
    },
    activated() {
      this.getUsedBrands();
      this.getUsedSeries();
      this.getUsedType();
    },
    methods: {
      //取消上传，清空上传文件
      doClear() {
        this.$refs.uploadRef.clearFiles()
      },
      inputFileList(value) {
        this.ruleForm.fileList = value;
        console.log(this.ruleForm.fileList)
      },
      changeSeries(e) {
        if (e !== null) {
          console.log(e)
          this.$http({
            url: this.$http.adornUrl(`/boss/series/findListByBrandId/${e}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            this.seriesList = data.data
          })
        } else {
          this.getUsedSeries()
        }
      },
      changeBrand(e) {
        console.log(e)
        if (e !== null) {
          this.$http({
            url: this.$http.adornUrl(`/boss/series/findBrandBySeriesId/${e}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            this.ruleForm.brandId = data.data.brandId
          })
        }
      },
      getUsedBrands() {
        this.$http({
          url: this.$http.adornUrl('/boss/brand/list'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.brandList = data.data
        })
      },
      getUsedSeries() {
        this.$http({
          url: this.$http.adornUrl('/boss/series/list'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.seriesList = data.data
        })
      },
      getUsedType() {
        this.$http({
          url: this.$http.adornUrl('/boss/usedCarType/usedTypeList'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.typeList = data.data
        })
      },
      //数的正则判断
      changeCarMileageInput(val) {
        this.ruleForm.usedCarMileage = val.replace(/[^\d.]/g, '');
      },
      changeDisplacementInput(val) {
        this.ruleForm.usedCarDisplacement = val.replace(/[^\d.]/g, '');
      },
      changeHandSaleInput(val) {
        this.ruleForm.usedCarHandSale = val.replace(/[^\d.]/g, '');
      },
      changeDownPaymentInput(val) {
        this.ruleForm.usedCarDownPayment = val.replace(/[^\d.]/g, '');
      },
      changeTaxPriceInput(val) {
        this.ruleForm.usedCarTaxPrice = val.replace(/[^\d.]/g, '');
      },
      changeCarSeatInput(val) {
        this.ruleForm.usedCarSeat = val.replace(/[^\d]/g,'');
      },
      changeTranShipInput(val) {
        this.ruleForm.usedCarTranShip = val.replace(/[^\d]/g,'');
      },
      changeKeyCountInput(val) {
        this.ruleForm.usedCarKeyCount = val.replace(/[^\d]/g,'');
      },
      submitForm() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/boss/car/save'),
              method: 'post',
              data: this.$http.adornData({
                'usedCar': this.ruleForm
              })
            }).then(({data}) => {
              if (data && data.code === 1) {
                this.$message({
                  showClose: true,
                  message: '二手车添加成功,\\（￣︶￣）/',
                  type: 'success',
                  duration: 5500,
                })
                this.resetForm('ruleForm')
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.doClear();
      }
    }
  }
</script>
<style>
  /**
   * 解决el-input设置类型为number时，中文输入法光标上移问题
   **/
  .el-input__inner {
    line-height: 1px !important;
  }

  .span1 {
    color: red;
    size: 5px;
    position: relative;
    top: 25px;
    left: 24px;
  }

  .span2 {
    color: red;
    size: 5px;
    position: relative;
    top: 25px;
    left: 10px;
  }

  .span3 {
    color: red;
    size: 5px;
    position: relative;
    top: 25px;
    left: 10px;
  }

  .span4 {
    color: red;
    size: 5px;
    position: relative;
    top: 25px;
    left: 24px;
  }

  .span5 {
    color: red;
    size: 5px;
    position: relative;
    top: 25px;
    left: 10px;
  }

  .span6 {
    color: red;
    size: 5px;
    position: relative;
    top: 25px;
    left: 24px;
  }
</style>
